<template>
  <div class="hello">
    <mt-swipe :auto="2000">
      <mt-swipe-item v-for="item in data" :key="item.url">
        <a :href="item.url"><img :src="item.img"/></a>
      </mt-swipe-item>
    </mt-swipe>

    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <span class="mui-icon mui-icon-home"></span>
          <div class="mui-media-body">新闻资讯</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
          <div class="mui-media-body">图片分享</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <span class="mui-icon mui-icon-chatbubble"></span>
          <div class="mui-media-body">商品购买</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <span class="mui-icon mui-icon-location"></span>
          <div class="mui-media-body">留言反馈</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <span class="mui-icon mui-icon-search"></span>
          <div class="mui-media-body">视频专区</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <span class="mui-icon mui-icon-phone"></span>
          <div class="mui-media-body">联系我们</div></a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    getLunBotus () {
      this.$http.get('/api/lunbotus').then(resp => {
        this.data = resp.data.data
      }, resp => {
        console.log(resp.data.msg)
      })
    }
  },
  created () {
    this.getLunBotus()
  },
  data () {
    return {
      data: [
        {
          'img': 'http://www.itcast.cn/images/newslide/homepageandphone/20193928143939217.jpg',
          'url': 'http://www.baidu.com'
        },
        {
          'img': 'http://www.itcast.cn/images/newslide/homepageandphone/20194428164403757.gif',
          'url': 'http://www.taobao.com'
        },
        {
          'img': 'http://www.itcast.cn/images/newslide/homepageandphone/2019172715174304.jpg',
          'url': 'http://www.163.com'
        }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .mint-swipe {
    height: 200px;

    img {
      height: 100%;
      width: 100%;
    }
  }
  .mui-table-view {
    border: 0;
    margin-top: 0 !important;
    background-color: #ffffff;
    .mui-table-view-cell {
      border: 0;
    }
  }
</style>
